<template>
  <div>
    <RadioGroup
      v-if="type === 'radio'"
      ref="dicradio"
      v-model="name"
      @on-change="change"
      :vertical="vertical"
    >
      <Radio
        v-for="(item, index) in dic"
        :disabled="item.disabled"
        :label="item.value"
        :key="index"
      >
        <span :title="item.value">{{ item.label }}</span>
      </Radio>
    </RadioGroup>
    <CheckboxGroup
      v-else-if="type == 'checkbox'"
      v-model="checked"
      @on-change="change"
    >
      <Checkbox
        v-for="(item, index) in dic"
        :disabled="item.disabled"
        :label="item.value"
        :key="index"
      >
        <span :title="item.value">{{ item.label }}</span>
      </Checkbox>
    </CheckboxGroup>
    <AutoComplete
        v-else-if="type=='auto'"
        v-model="name"
        @on-change="change"
        :placeholder="placeholder"
        >
        <Option v-for="item in dic" :value="item" :key="item">{{ item }}</Option>
    </AutoComplete>
    <Select
      v-else
      :placeholder="placeholder"
      v-model="name"
      @on-change="change"
      :disabled="disabled"
      :multiple="multiple"
      clearable
      :transfer="true"
    >
      <Option
        v-for="(item, i) in dic"
        :value="item.value"
        :disabled="item.disabled"
        :key="item.value"
        :label="item.label"
      >
        <span :title="item.value">
          {{ item.label }}
        </span>
      </Option>
    </Select>
  </div>
</template>
<script>
export default {
  model: {
    prop: "value",
    event: "on-change",
  },
  props: {
    code: String,
    value: [String, Number, Array],
    placeholder: {
      type: String,
      default: "请选择",
    },
    type: {
      // 显示形式： select 或者radio
      type: String,
      default: "Select",
    },
    multiple: {
      //是否多选
      type: Boolean,
      default: false,
    },
    disabled: {
      //是否禁止选择
      type: Boolean,
      default: false,
    },
    vertical: {
      //排列方式 水平或者垂直
      type: Boolean,
      default: false,
    },
    limit: {
      //限制只在此值范围内进行选择，其它值不显示。
      type: String,
      default: "",
    },
  },
  data() {
    return {
      name: this.value,
      //选中项数组
      checked: [],
      data: [],
    };
  },
  created() {
    this.data = this.$store.getters.dictionaryByKey(this.code);
    if (this.type == "checkbox") {
      //如果v存在
      if (this.value) {
        this.checked = this.value.split(",");
      } else {
        this.checked = [];
      }
    }
  },
  mounted() {},

  methods: {
    change(event) {
      if (this.type == "checkbox") {
        event = event.join();
      }
      this.$emit("on-change", event);
      this.$emit("input", event);
    },
  },
  computed: {
    dic() {
      let result = [];
      let limit =[];
      if(this.limit!=""){
        limit=this.limit.split(",");
      } 
      this.data.forEach((u) => {
        let v = u.code;
        let s = u.status;
        if (limit.length == 0 || limit.indexOf(v) > -1) {
          //判断是否进行过滤
          if (this.$u.isInt(u.code)) {
            v = parseInt(u.code);
          }
          var disabled = this.disabled; //false
          if (!this.disabled) {
            disabled = s == 0 ? true : false;
          }
          result.push({
            label: u.name,
            value: v,
            disabled: disabled,
          });
        }
      });
      return result;
    },
  },
  watch: {
    value: {
      handler(v, o) {
        if (this.type == "checkbox") {
          //如果v存在
          if (v) {
            this.checked = v.split(",");
          } else {
            this.checked = [];
          }
        } else {
          this.name = v;
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="less">
.w200 {
  width: 200px;
}
</style>
